<template>
  <div class="table-container">
    <Header @confirm="search" @column="showColumnConfig = true" />

    <a-card :bordered="false">
      <a-table
        v-bind="comTableConfig"
        v-model:selectedKeys="selectedKeys"
        :columns="columnsData"
        :loading="table.loading"
        :page-position="comTableConfig.pagePosition"
        :bordered="{
          bodyCell: comTableConfig.bordered.bodyCell,
          wrapper: comTableConfig.bordered.wrapper,
          headerCell: comTableConfig.bordered.headerCell,
          cell: comTableConfig.bordered.cell
        }"
        :data="table.data"
        :row-selection="{
          showCheckedAll: true,
          type: 'checkbox',
          onlyCurrent: false
        }"
        row-key="goodsId"
        :pagination="{
          pageSize: query.pageSize,
          total: query.total,
          current: query.pageNum,
          showJumper: comTableConfig.pagination.showJumper,
          showPageSize: comTableConfig.pagination.showPageSize,
          showTotal: comTableConfig.pagination.showTotal,
          simple: comTableConfig.pagination.simple,
          showMore: comTableConfig.pagination.showMore
        }"
        @row-dblclick="editItem"
        @page-change="pageChange"
        @page-size-change="pageSizeChange"
      >
        <template #index="{ rowIndex }">{{ rowIndex + 1 }}</template>
        <template #goodsPhoto="{ record }">
          <div style="height: 60px">
            <a-image
              v-if="!!record.goodsPhoto"
              :src="record.goodsPhoto"
              :preview="false"
              fit="contain"
              height="60"
            ></a-image>
          </div>
        </template>
        <template #optional="{ record }">
          <div>
            <a-link @click="editItem(record)">
              {{ t["编辑"] }}
            </a-link>

            <XDelete :disabled="record.disable" @ok="delByIds(record.goodsId)">
              {{ t["删除"] }}
            </XDelete>
          </div>
        </template>

        <template #share="{ record }">
          <template v-if="Number(record.share) === 0">
            <icon-stop style="color: red" />
          </template>

          <template v-else>
            <IconCheck style="color: green" />
          </template>
        </template>
      </a-table>
    </a-card>
    <a-modal
      v-model:visible="showGoods"
      :draggable="true"
      :title="t['操作']"
      :mask-closable="false"
      width="740px"
      :footer="!form.disable"
      :body-style="{ height: '600px' }"
    >
      <a-tabs default-active-key="1" size="medium">
        <a-tab-pane key="1" :title="t['基础字段']">
          <static-form :get-list="getList" />
        </a-tab-pane>
        <a-tab-pane key="2" :title="t['拓展字段']">
          <extends-form />
        </a-tab-pane>
        <a-tab-pane key="3" :title="t['批量新增']">
          <BulkOperation type="0" url="/goods/goods/xlsx?type=0">
            <h3>{{ t["上传文件，批量新增"] }}</h3>
          </BulkOperation>
        </a-tab-pane>
      </a-tabs>
      <template v-if="!form.disable" #footer>
        <a-button type="primary" @click="submit">{{ t["保存"] }}</a-button>
      </template>
    </a-modal>

    <ColumnConfig v-model:show="showColumnConfig"></ColumnConfig>
  </div>
</template>

<script setup lang="ts">
import { getGoodsTableConfig } from "@/store/modules/form/form.utils";
import { useEventBus } from "@vueuse/core";

import { toCamelCase } from "@/utils/format";
import ColumnConfig from "./column-config/ColumnConfig.vue";
import columns from "./data/columns";

import { delByIds, editItem, getCateGoryList, getList, pageChange, search } from "./data/curd";
import { form, showGoods } from "./data/form";
import { query, selectedKeys, table } from "./data/table";
import ExtendsForm from "./extends-form/extends-form.vue";
import Header from "./head/Head.vue";
import StaticForm from "./static-form/static-form.vue";

const bus = useEventBus<string>("submit");
const t = translate("公共模块");

const showColumnConfig = ref(false);

onMounted(async () => {
  await getList();
  getCateGoryList();
});

const submit = () => {
  bus.emit("submit");
};

bus.on((_, category: string) => {
  query.value.category = category;
  getList();
});

const comTableConfig = computed(() => {
  return getGoodsTableConfig().tableConfig;
});
const columnsData = computed(() => {
  const result = columns.value.filter((item) => {
    item.title = t.value?.[item.title as string] || item.title;
    item.align = "center";
    item.slotName = toCamelCase(item.dataIndex || "");
    item.dataIndex = toCamelCase(item.dataIndex || "");

    if (!item.width) item.width = 200;
    const tableConfig = getGoodsTableConfig();

    return (
      Object.values(tableConfig.defaultField).findIndex((e) => {
        return e === item.dataIndex;
      }) > -1
    );
  });
  return result;
});

const pageSizeChange = (size: number) => {
  query.value.pageSize = size;
  getList();
};
</script>

<style scoped lang="scss">
.tags {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, 40px);
}
</style>
